<template>
<div class="plTable">
  <el-table
    :data="tableData"
    border
    v-bind="$attrs"
    :height="height"
    style="width: 100%;">
     <el-table-column
      v-if="showIndex"
      label="序号"
      type="index"
      width="50">
    </el-table-column>
    <el-table-column
      v-for="(col, idx) in shownCols"
      :key="'col_'+idx"
      :prop="col.prop"
      :label="col.label"
      :formatter="col.formatter"
      v-bind="col">
    </el-table-column>
    <el-table-column
      v-if="showButton"
      label="操作"
      fixed="right"
      align="center"
      :width="buttonWidth"
      >
      <template slot-scope="scope">
        <slot name="buttons" v-bind="scope"></slot>
      </template>
    </el-table-column>
  </el-table>
   <el-pagination
    v-if="showPagination"
    class="pagination"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    background
    layout="prev, pager, next, total, sizes"
    :total="total">
    <template slot-scope="scope">
      {{scope}}
    </template>
    </el-pagination>
</div>
</template>

<script>
import fmt from '@/utils/commonFormatter'
export default {
  name: 'PageTable',
  props: {
    tableData: {
      type: Array,
      require: true
    },
    tableCols: {
      type: Array,
      require: true
    },
    pageSizes: {
      type: Array,
      default: () => [1,2,5,10,20, 50, 100, 200]
    },
    total: {
      type: Number,
      default: 0
    },
    showPagination: {
      type: Boolean,
      default: true
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    showButton: {
      type: Boolean,
      default: false
    },
    buttonWidth: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      currentPage: 0,
      pageSize: 20,
      height: 500
    }
  },
  computed: {
    shownCols() {
      let cols = this.tableCols.map(col => {
        let formatter = col.formatter ?? 'normal'
        return {
          ...col,
          formatter: fmt[formatter]
        }
      });
      return cols
    },
    shownData() {
      let fmtMap = {};
      this.shownCols.forEach(o => fmtMap[o.prop] = o)
      let data = this.tableData.map(row => {
        let ret = {}
        for(let key in row) {
          let fmt = fmtMap[key]
          ret[key] = fmt(row, key, row[key])
        }
        return ret
      })
      return data
    }
  },
  mounted() {
    this.$nextTick(() => {
      let plTable = document.querySelector('.plTable')
      this.height = plTable.clientHeight
    })
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.$emit('size-change', size)
    },
    handleCurrentChange(current) {
      this.currentPage = current;
      this.$emit('current-change', current);
    },
  }
}
</script>

<style scoped>
.plTable {
  height: calc(100% - 36px);
}
.plTable .pagination {
  margin-top: 5px;
  float: right;
}
.plTable >>> .el-table__row,
.plTable >>> .el-table__row > td,
.plTable >>> .el-table__row > td * {
  padding-top: 0;
  padding-bottom: 0;
  height: 46px;
  line-height: 46px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>